<template>
	<view class="container">
		<u-form :model="form" ref="uForm" label-position="top" :error-type="['toast']">
			<u-form-item label="宝宝">
				<view class="children-view">
					<children-list-view :addShow="addShow()" @showClasses="showClasses" :childrenList="childrenList"
						@itemClick="childrenItemClick"></children-list-view>
				</view>
			</u-form-item>
			<u-form-item label="如厕时间" prop="eventTime">
				<u-input v-model="form.eventTime" type="select" placeholder="请选择时间" @click="timeShow = true" />
			</u-form-item>
			<u-form-item label="类型" prop="type">
				<u-radio-group v-model="form.type" @change="radioChange"size="40" >
					<u-radio activeColor="#b2cc2f" v-for="(item, index) in radioList" :key="index" :name="item.value">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item v-if="form.type === '1' || form.type === 1 " label="颜色" prop="color">
				<u-radio-group v-model="form.color" size="40">
					<u-radio activeColor="#b2cc2f" v-for="(item, index) in colorList" :key="index" :name="item.value">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item v-if="form.type === '0' || form.type === 0 " label="颜色" prop="color">
				<u-radio-group v-model="form.color" size="40">
					<u-radio activeColor="#b2cc2f" v-for="(item, index) in colorsList" :key="index" :name="item.value">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item v-if="form.type === '1' || form.type === 1 " label="形态" prop="pottyState">
				<u-radio-group v-model="form.pottyState" size="40">
					<u-radio activeColor="#b2cc2f" v-for="(item, index) in shapeList" :key="index" :name="item.value">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="照片">
				<x-upload
					ref="uUpload"
					:form-data="formData"
					@onUploaded="onUploaded"
					@onRemove="onRemove"
					:hasVideo="false"
				/>
			</u-form-item>
		</u-form>
		<u-button class="action-view" @click="saveClick">保存</u-button>
		<u-picker v-model="timeShow" mode="time" :params="params" @confirm="confirmTime"></u-picker>
		<children-select-view ref="popupConpare" @confirm="confirm"></children-select-view>
	</view>
</template>

<script>
	import {
		addRecordPotty,
		getRecordPotty,
	} from '@/api/record.js'
	import ChildrenListView from '@/components/children-list-view.vue'
	import ChildrenSelectView from '@/components/children-select-view.vue'
	import {
		formatDateByTimestamp
	} from '@/utils/utils.js'
	import recordMixin from './mixins/index.js'
	import XUpload from '@/components/x-upload'
	export default {
		mixins: [recordMixin],
		components: {
			ChildrenListView,
			ChildrenSelectView,
			XUpload
		},
		data() {
			return {
				form: {
					eventTime: formatDateByTimestamp(Date.now(), 'yyyy/mm/dd hh:MM:ss'),
					type: '0',
					typeStr: '小便',
					color: '',
					colors:'',
					pottyState: '',
					monkeyAss: false,
					diaper: false,
					img:''
				},
				formData: {
					'bizType': 'record-feeding'
				},
				rules: {
					eventTime: [{
						required: true,
						message: '请选择如厕时间',
					}, ],
					type: [{
						required: true,
						message: '请选择类型',
					}, ],
					color: [{
						required: true,
						message: '请选择颜色'
					}, ],
					pottyState: [{
						validator: (rule, value, callback) => {
							console.log(value);
							if (this.form.type === '1') {
								return !this.$u.test.isEmpty(value)
							}
							return true;
						},
						message: '请选择形状'
					}, ],
				},

				radioList: [
					{
						name: '小便',
						value: '0',
					},{
						name: '大便',
						value: '1',
					}
				],
				colorList: [{
						name: '正常',
						value: '0',
					},
					{
						name: '偏黑',
						value: '1',
					},
					{
						name: '偏绿',
						value: '2',
					},
					{
						name: '其他',
						value: '3',
					}
				],
				
				colorsList:[
					{
						name: '正常',
						value: '0',
					},
					{
						name: '偏黄',
						value: '1',
					},
				],

				shapeList: [{
						name: '正常',
						value: '0',
					},
					{
						name: '偏稀',
						value: '1',
					},
					{
						name: '偏硬',
						value: '2',
					}
				],

				timeShow: false,
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false,
					timestamp: true,
				},
			}
		},
		computed:{
			typeInfos() {
				return this.infoType
			}
		},
		onLoad(options) {
			this.form.diaper = Boolean(options.diaper);
			if (this.form.diaper) {
				uni.setNavigationBarTitle({
				　　title: '换尿布'
				})
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			addRecord() {
				this.$refs.uUpload.upload();
			},

			confirmTime(res) {
				this.form.eventTime = formatDateByTimestamp(res.timestamp, 'yyyy/mm/dd hh:MM:ss');
			},
			
			getRecord() {
				console.log(this.recordId)
				if (this.$u.test.isEmpty(this.recordId)) {
					return;
				}
				uni.showLoading({})
				const params = {
					id: this.recordId,
					childId: this.defaultChildren.id
				}
					getRecordPotty(params).then(res => {
						console.log(res)
						uni.hideLoading()
						const { type, typeStr, color, pottyState, monkeyAss, diaper,img} = res.data; 
						const eventTime = formatDateByTimestamp(parseFloat(res.data.eventTime), 'yyyy/mm/dd hh:MM:ss')
						const form = {
							eventTime,
							type,
							typeStr,
							color,
							pottyState,
							monkeyAss,
							diaper,
							img
						};
						if(img !== '') {
							const list = img.split("|").map(a => ({ url: a }));
							this.$refs.uUpload.fileList = list
						}
						this.form = form
					})		

			},
			onUploaded(data) {
	
				this.form.img = data.resourceUrl;

				let childIds = '';
				for (let index in this.childrenList) {
					let item = this.childrenList[index];
					childIds += `,${item.id}`;
				}
				if (childIds.length > 0) {
					childIds = childIds.substring(1);
				}
				let index = parseInt(this.form.type);
				this.form.typeStr = this.radioList[index].name;
				if (!this.$u.test.isEmpty(this.recordId)) {
					this.form.id = this.recordId
					this.form.childId = childIds
				}else {
					this.form.childIds = childIds
				}
				
				addRecordPotty(this.form).then(res => {
					this.$u.toast('添加成功');
					setTimeout(function(){
						uni.navigateBack({delta:1})
					},1000)
				})
			},
			
			onRemove(data) {
				this.form.img = data.resourceUrl;
			},
			radioChange() {
				this.form.color = ''
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: $app-page-bg-color;
	}
</style>
<style lang="scss" scoped>
	@import '@/css/u-form.scss';
	/deep/ .u-btn {
		border: 0 !important;
		color: white !important; 
		border-radius: 50rpx !important;
		background-image: linear-gradient(to right,#f3ba30, #d1c32a , #b0cb23) !important;
	}
	.container {
		padding-left: 30rpx;
		padding-right: 30rpx;
		display: flex;
		flex-direction: column;
	}

	.children-view {
		width: 10rpx;
		flex: 1;
		display: flex;
		flex-direction: row;
	}

	.action-view {
		margin-top: 0 !important;
	}
</style>
